<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="component-date-picker">
    <picker-view
      v-if="visible"
      :indicator-style="indicatorStyle"
      :value="dateValue"
      class="picker-view"
      @change="bindChange"
    >
      <picker-view-column>
        <view
          v-for="(item, index) in years"
          :key="index"
          class="item"
        >
          {{ item }}年
        </view>
      </picker-view-column>
      <picker-view-column>
        <view
          v-for="(item, index) in months"
          :key="index"
          class="item"
        >
          {{ item }}月
        </view>
      </picker-view-column>
      <picker-view-column>
        <view
          v-for="(item, index) in days"
          :key="index"
          class="item"
        >
          {{ item }}日
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</template>
<script setup>
import dayjs from 'dayjs'

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'start'
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  // 是否只能选择过去时间
  checkPast: {
    type: Boolean,
    default: false
  }
})

// 获取初始值
const [
  _years,
  _year,
  _months,
  _month,
  _days,
  _day
] = (() => {
  const date = new Date()
  const years = []
  const year = date.getFullYear()
  const months = []
  const month = date.getMonth() + 1
  const days = []
  const day = date.getDate()
  const monthDays = (new Date(year, month, 0)).getDate()
  for (let i = 1990; i <= date.getFullYear() + (props.checkPast ? 0 : 10); i++) {
    years.push(i)
  }
  for (let i = 1; i <= (props.checkPast ? month : 12); i++) {
    months.push(i)
  }
  for (let i = 1; i <= (props.checkPast ? day : monthDays); i++) {
    days.push(i)
  }
  return [
    years,
    year,
    months,
    month,
    days,
    day
  ]
})()

const years = _years
let year = _year
const months = ref(_months)
let month = _month
const days = ref(_days)
let day = _day
const dateValue = reactive([_year - 1990, _month - 1, _day - 1])
const visible = ref(true)
const indicatorStyle = 'height: 50rpx;'
let isFirst = true

const bindChange = (e) => {
  const val = e.detail.value
  year = years[val[0]]
  month = months.value[val[1]]
  day = days.value[val[2]]

  if (val[0] !== dateValue[0] || val[1] !== dateValue[1]) { // 当年份呢或者月份改变时  重新获取当月的天数
    getMonthDays(year, month)
  }

  if (props.checkPast) {
    getPastTime()
  }

  let date = dayjs(year + '-' + month + '-' + day, 'YYYY-M-D')
  let format = date
  if (props.type === 'start') {
    date = date.startOf('day').format('YYYY-MM-DD HH:mm:ss')
    format = format.startOf('day').format(props.format)
  } else if (props.type === 'end') {
    date = date.endOf('day').format('YYYY-MM-DD HH:mm:ss')
    format = format.endOf('day').format(props.format)
  }
  emit('update:modelValue', date, format)
}
const getPastTime = () => {
  const date = new Date()
  const y = date.getFullYear()
  const m = date.getMonth() + 1
  const d = date.getDate()

  months.value = []
  for (let i = 1; i <= (+year === y ? m : 12); i++) {
    months.value.push(i)
  }

  if (+year === y && +month === m) {
    days.value = []
    for (let i = 1; i <= d; i++) {
      days.value.push(i)
    }
  }
}
// 获取某月有多少条
const getMonthDays = (year, month) => {
  const monthDays = (new Date(year, month, 0)).getDate()
  days.value = []
  for (let i = 1; i <= monthDays; i++) {
    days.value.push(i)
  }
}
watch(() => props.modelValue, (val) => {
  if (val && val.length > 10 && isFirst) {
    dateValue[0] = Number(val.substring(0, 4)) - 1990
    dateValue[1] = Number(val.substring(5, 7)) - 1
    dateValue[2] = Number(val.substring(8, 10)) - 1
    getMonthDays(dateValue[0] + 1990, dateValue[1] + 1)
    if (props.checkPast) {
      getPastTime()
    }
    isFirst = false
  }
}, {
  immediate: true
})
</script>
<style lang="scss" scoped>
.component-date-picker{
  .picker-view {
    width: 100%;
    height: 310rpx;
    margin-top: 20rpx;
  }
  .item {
    line-height: 50rpx;
    text-align: center;
  }
}
</style>
